<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>订单管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./lib/nprogress/nprogress.css">
  <link rel="stylesheet" href="./css/xadmin.css">
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="./js/xadmin.js"></script>
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">订单管理</a>
        <a>
          <cite>订单列表</cite></a>
      </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
  <div class="layui-row">
    <form class="layui-form layui-col-md12 x-so">
      <input class="layui-input" placeholder="开始日" name="start" id="start">
      <input class="layui-input" placeholder="截止日" name="end" id="end">
      <input type="text" name="username"  placeholder="请输入订单号" autocomplete="off" class="layui-input">
      <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
    </form>
  </div>
  <xblock>
    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
    <span class="x-right" style="line-height:40px">共有数据：7 条</span>
  </xblock>
  <!--数据表格-->
  <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
  <script>
      // 进度条加载提示
      //			NProgress.start();
      //			window.onload = function() {
      //					NProgress.done();
      //				}
      // layui相关
      layui.use(['element', 'table', 'form', 'jquery', 'laydate'], function() {
          var element = layui.element;
          var table = layui.table;
          var form = layui.form;
          var $ = layui.jquery;
          var laydate = layui.laydate;
          laydate.render({
              elem: '#startTime',
              type: "datetime"
          });
          laydate.render({
              elem: '#endTime',
              type: "datetime"
          });
          table.render({
              elem: '#tableId',
              url: "http://admin.516code.cn/backstage/selectAllPro.do",
              limit: 10,
              page: true,
              even: true,
              cols: [
                  [{
                      type: 'checkbox'
                  }, {
                      field: 'productId',
                      title: '产品编号',
                      width: 100,
                      sort: true
                  }, {
                      field: 'productName',
                      title: '产品名称',
                      width: 100
                  }, {
                      field: 'productNum',
                      title: '产品数量',
                      width: 100
                  }, {
                      field: 'productPrice',
                      title: '产品价格',
                      width: 100
                  }, {
                      field: 'productImg',
                      title: '产品图片',
                      width: 150
                  }, {
                      field: 'productTypeId',
                      title: '产品类型编号',
                      width: 130
                  }, {
                      title: '操作',
                      width: 100,
                      templet: '#operationTpl',
                      align: 'center'
                  }]
              ],
              done: function(res, curr, count) {
                  $("#countNum").text(count);
              }
          });
          form.on('submit(search)', function() {
              layer.msg('正在查询，请稍后...');
              return false;
          });
          table.on('tool(tableFilter)', function(obj) {
              var data = obj.data;
              var layEvent = obj.event;
              if (layEvent === 'edit') {
                  layer.open({
                      title: '产品详情',
                      type: 2,
                      shade: false,
                      maxmin: true,
                      shade: 0.5,
                      area: ['60%', '70%'],
                      content: 'Product-add.html',
                      zIndex: layer.zIndex,
                      success: function(layero, index) {
                          console.log(data);
                          //                      var jquerySendHelloButton = $("#id", layero.find("iframe")[0].contentWindow.document);
                          //               		jquerySendHelloButton.attr("value", data.customerName );
                          var body = layui.layer.getChildFrame('body', index);
                          if (data) {
                              body.find(".productId").val(data.productId);
                              body.find(".productName").val(data.productName);
                              body.find(".productNum").val(data.productNum);
                              body.find(".productPrice").val(data.productPrice);
                              body.find(".productImg").val(data.productImg);
                              body.find(".productTypeId").val(data.productTypeId);

                          }
                      },
                      end: function() {
                          $(".layui-laypage-btn")[0].click();
                      }
                  });
              } else if (layEvent === 'del') {

              }
          });
      })
  </script>
</body>

<script type="text/html" id="operationTpl">
  <a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
  <a title="删除" onclick="member_del(this,'要刪除的id')" href="javascript:;">
    <i class="layui-icon">&#xe640;</i>
  </a>
</script>

<script type="text/javascript">
    /*訂單-删除*/
    function member_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
        });
    }
</script>
</html>